<template>
  <div class="wrap" v-loading="loading" element-loading-text="努力加载中...">
    <!-- 顶部导航 -->
    <div class="top">
      <div class="hos_name" @click="goRegister">{{ depInfo?.hosname }}</div>
      <SvgIcon name="line-blue" />
      <div>{{ depInfo?.bigname }}</div>
      <SvgIcon name="dot-blue" />
      <div class="dep_name">{{ depInfo?.depname }}</div>
    </div>
    <!-- 中间展示挂号信息 -->
    <div class="center">
      <!-- 时间 -->
      <div class="time">
        <p>当前时间：{{ time }}&nbsp;&nbsp;周{{ week }}</p>
        <p>
          挂号时间：
          <span style="color: rgb(116, 200, 233)">
            {{ depInfo?.releaseTime }}
          </span>
          -
          <span style="color: hotpink">{{ depInfo?.stopTime }}</span>
        </p>
      </div>
      <!-- 挂号信息卡片 -->
      <div class="card">
        <div
          class="container"
          v-for="item in workDateList"
          :key="item.workDate"
          :class="{
            haveNumber: item.status != -1 && item.reservedNumber > 0,
            active: activeBookingDate == item.workDate,
          }"
          @click="changeBookingDate(item)"
        >
          <div class="top">
            <p>{{ item.workDate }}</p>
            <p>{{ item.dayOfWeek }}</p>
          </div>
          <div class="content">
            <p>{{ getBookingStatus(item) }}</p>
          </div>
        </div>
      </div>
      <!-- 分页器 -->
      <div class="pager">
        <el-pagination
          v-model:current-page="currentPage"
          layout="prev, pager, next"
          @current-change="getWorkDate()"
          :page-size="6"
          :total="total"
        />
      </div>
    </div>
    <!-- 底部号源 -->
    <div class="bottom">
      <!-- 可以挂号 -->
      <div
        v-if="activeBookingStatus == 0 && doctorList.length > 0"
        class="haveNumber"
      >
        <!-- 上午号源 -->
        <div class="morning">
          <!-- 标题 -->
          <div class="title">
            <SvgIcon name="morning" width="20px" height="20px" />
            <div style="margin-left: 10px">上午号源</div>
          </div>
          <!-- 医生列表 -->
          <div class="doctor" v-for="item in morningDoctorList" :key="item.id">
            <div class="left">
              <div class="top">
                <span style="margin-right: 5px">{{ item.title }}</span>
                <SvgIcon name="line-long-blue" />
                <span>{{ item.docname }}</span>
              </div>
              <div class="bottom">{{ item.skill }}</div>
            </div>
            <div class="right">
              <div class="money">
                <span>￥</span>
                <span style="margin-left: 2px">{{ item.amount }}</span>
              </div>
              <el-button type="primary" @click="goStepTwo(item)">
                剩余{{ item.availableNumber }}/{{ item.reservedNumber }}
              </el-button>
            </div>
          </div>
        </div>
        <!-- 下午号源 -->
        <div class="afternoon">
          <div class="title">
            <SvgIcon name="afternoon" width="20px" height="20px" />
            <div style="margin-left: 10px">下午号源</div>
          </div>
          <!-- 医生列表 -->
          <div
            class="doctor"
            v-for="item in afternoonDoctorList"
            :key="item.id"
          >
            <div class="left">
              <div class="top">
                <span style="margin-right: 5px">{{ item.title }}</span>
                <SvgIcon name="line-long-blue" />
                <span>{{ item.docname }}</span>
              </div>
              <div class="bottom">{{ item.skill }}</div>
            </div>
            <div class="right">
              <div class="money">
                <span>￥</span>
                <span style="margin-left: 2px">{{ item.amount }}</span>
              </div>
              <el-button type="primary" @click="goStepTwo(item)">
                剩余{{ item.availableNumber }}/{{ item.reservedNumber }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 挂号时间未到 -->
      <div v-else-if="activeBookingStatus == 1" class="waitNumber">
        放号时间：
        <span style="color: hotpink">
          {{ activeBookingDate }}&nbsp;{{ depInfo?.releaseTime }}
        </span>
      </div>
      <!-- 挂号结束 -->
      <div v-else class="noNumber">今日已停止挂号，请预约次日</div>
    </div>
  </div>
</template>

<script setup lang="ts" name="RegisterStepOne">
import { reqDoctorSchedule, reqHospitalWork } from '@/api/hospital'
import type {
  Doctor,
  baseMap,
  booking,
  bookingScheduleList,
} from '@/api/hospital/type'
import { ElMessage } from 'element-plus'
import moment from 'moment'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 控制页面是否加载
let loading = ref(false)
// 获取路由器对象
const router = useRouter()
// 获取当前路由对象
const route = useRoute()
// 存储当前医院code
let hosCode = ref(route.query.hoscode as string)
// 存储当前科室code
let depCode = ref(route.query.depcode as string)
// 动态获取当前时间
let time = ref(moment().format('YYYY年MM月DD日 HH时mm分'))
// 获取当前周几 moment().day()返回0-6
let week = ref(['日', '一', '二', '三', '四', '五', '六'][moment().day()])
// 存储定时器
let timer = ref()
// 存储分页器当前页数
let currentPage = ref(1)
// 存储分页器总页数
let total = ref(0)
// 存储当前科室的预约时间表信息
let workDateList = ref<bookingScheduleList>()
// 存储当前预约科室的基本信息
let depInfo = ref<baseMap>()
// 存储当前点击的预约卡片的日期,用于展示激活的样式和获取当天号源(默认为当日)
let activeBookingDate = ref<string>('') // 当获取到预约时间表后存储第0项的日期
// 存储当前激活的预约日期状态
let activeBookingStatus = ref(0) // -1:已结束,0:可预约,1:暂未开放
// 存储当前日期排班医生列表
let doctorList = ref<Doctor[] | []>([])

// 过滤计算上午排班的医生
let morningDoctorList = computed(() => filterDoctor(0))
// 过滤计算下午排班的医生
let afternoonDoctorList = computed(() => filterDoctor(1))

// 点击顶部导航回到预约挂号页
const goRegister = () => {
  router.replace({
    name: 'register',
    query: {
      hoscode: hosCode.value,
    },
  })
}
// 返回当前日期挂号状态
const getBookingStatus = (item: booking) => {
  if (item.status == -1) return '已结束'
  else if (item.status == 0 && item.availableNumber < 0) return '已满'
  else if (item.status == 1) return '暂未开放'
  else return `可预约(${item.availableNumber})`
}
// 获取当前科室的全部预约信息
const getWorkDate = async () => {
  // 开启页面加载
  loading.value = true
  let result = await reqHospitalWork(
    currentPage.value,
    6,
    hosCode.value,
    depCode.value,
  )
  if (result.code === 200) {
    // 存储当前科室的预约信息
    workDateList.value = result.data.bookingScheduleList
    total.value = result.data.total
    depInfo.value = result.data.baseMap
    // 关闭页面加载
    loading.value = false
  } else {
    ElMessage.error('获取预约信息失败')
  }
}
// 获取选中日期的医生列表
const getDoctor = async () => {
  let result = await reqDoctorSchedule(
    hosCode.value,
    depCode.value,
    activeBookingDate.value,
  )
  if (result.code === 200) {
    // 存储当前日期医生列表
    doctorList.value = result.data
  } else {
    ElMessage.error('获取医生列表失败')
  }
}
// 过滤上午/下午医生列表的方法
const filterDoctor = (time: number) => {
  return doctorList.value.filter((item) => item.workTime === time)
}
// 点击挂号日期卡片的回调
const changeBookingDate = (item: booking) => {
  // 修改当前激活的日期
  activeBookingDate.value = item.workDate
  // 修改当前激活的日期预约状态
  activeBookingStatus.value = item.status
  // 发请求获取点击日期的医生列表
  getDoctor()
}
// 点击挂号按钮的回调，跳转到挂号第二步页面(就诊人选择)
const goStepTwo = (doctor: Doctor) => {
  // 跳转到挂号第二步页面，并携带当前医生id
  router.push({
    name: 'registerStepTwo',
    query: {
      hoscode: hosCode.value, // 医院id刷新依旧可以获取到医院的数据
      doctorId: doctor.id, // 医生id 获取对应医生的信息
    },
  })
}
// 组价挂载时开启定时器并获取当前科室的预约信息
onMounted(async () => {
  // 开启定时器每隔一分钟更新时间
  timer.value = setInterval(() => {
    time.value = moment().format('YYYY年MM月DD日 HH时mm分')
    week.value = ['日', '一', '二', '三', '四', '五', '六'][moment().day()]
  }, 1000)
  // 获取当前科室的预约信息
  await getWorkDate()
  // 将当天日期设置为默认查看日期
  // @ts-ignore
  activeBookingDate.value = workDateList.value[0].workDate as string
  // 获取第一天的预约状态
  // @ts-ignore
  activeBookingStatus.value = workDateList.value[0].status
  // 获取第一天排班医生列表
  getDoctor()
})
// 组件卸载前清除定时器
onBeforeUnmount(() => {
  clearInterval(timer.value)
})
</script>

<style scoped lang="scss">
:deep(.el-button) {
  width: 100px;
}
.wrap {
  margin: 20px 0 20px 20px;
  color: $base-color;
  .top {
    display: flex;
    .hos_name {
      &:hover {
        cursor: pointer;
        color: $base-active-color;
      }
    }
  }
  .center {
    margin-top: 25px;
    // color: $base-active-color;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .time {
      width: 60%;
      margin-top: 20px;
      font-size: 18px;
      display: flex;
      justify-content: space-between;
    }
    .card {
      margin-top: 30px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      // justify-content: start;
      .container {
        // margin-right: 20px;
        border: 1.5px solid rgb(207, 203, 203);
        // 添加过渡动画
        transition: all linear 0.3s;
        &:hover {
          cursor: pointer;
          box-shadow: 0 0 10px rgb(158, 157, 157);
          // transform: scale(1.1);
        }
        .top {
          min-width: 140px;
          display: flex;
          justify-content: space-between;
          background-color: rgb(212, 209, 209);
          padding: 10px;
          font-size: 14px;
          color: $base-color;
          font-weight: 600;
        }
        .content {
          font-size: 16px;
          color: $base-color;
          text-align: center;
          padding: 20px;
          // 添加过渡动画
          // transition: all linear 0.3s;
        }
        // 动态类名有号时的样式
        &.haveNumber {
          border: 1.5px solid $base-active-color;
          .top {
            background-color: rgb(184, 226, 243);
            color: rgb(61, 183, 231);
          }
          .content {
            color: $base-active-color;
          }
        }
        // 动态类名点击卡片时的样式
        &.active {
          box-shadow: 0 0 10px rgb(183, 182, 182);
          transform: scale(1.1);
          .content {
            font-weight: bold;
            color: white;
            background-color: rgb(232, 190, 210);
          }
        }
      }
    }
    .pager {
      margin-top: 20px;
    }
  }
  .bottom {
    .morning,
    .afternoon {
      .title {
        margin-top: 30px;
        font-size: 18px;
        display: flex;
        align-items: center;
      }
      .doctor {
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-bottom: 1.5px solid rgb(202, 195, 195);
        .left {
          .top {
            margin: 20px 0;
            display: flex;
            align-items: center;
            color: $base-active-color;
          }
          .bottom {
            margin-bottom: 15px;
          }
        }
        .right {
          width: 17%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
    .waitNumber,
    .noNumber {
      margin-top: 60px;
      text-align: center;
      font-size: 25px;
      color: $base-active-color;
    }
  }
}
</style>
